<template>
  <div>
    <Header></Header>
    <footer id="fabNav" class="affix dock-bottom dock-left fab has-padding dock-auto shadow-none"  v-show="!showToggle">
      <a id="tocBtn" class="btn circle primary_btn layer btn-lg" @click="chat"><i class="icon icon-pencil"></i></a>
    </footer>
    <div>
      <div class="menu-top mt-5 discussion-content ">
        <div class="img-box ms-1 mt-1"><img :src="data.imgbase64"></div>
        <div class="mt-2 ms-1">
          <p class="book-tap mt-1">{{ data.username }}</p>
          <div class="book-tap">
            <div class="rating">
              <span class="star">★</span>
              <span class="star">★</span>
              <span class="star">★</span>
              <span class="star">☆</span>
              <span class="star">☆</span>
            </div>
          </div>
        </div>
      </div>
      <div class="top">
        <div class="row discussion">
          <p class="mt-2">{{ data.ext }}</p>
          <p class="mt-2 mb-2"><span>{{ data.updatetime.substring(0, 4) == new Date().getFullYear()
            ? data.updatetime.replace(/^[^-]*-|:[^:]*$/g, '')
            : data.updatetime.replace(/:[^:]*$/g, '') }}</span>
            <span class="right_index"><i class="icon-chat-line"></i> {{ data.messagecount }} &nbsp;
              <i class="icon-thumbs-o-up"></i> {{ data.hitsum }}
            </span>
          </p>
        </div>
      </div>
    </div>
    <div class="top mt-2" v-if="discussion.length > 0">
      <h4 class="pt-2 ps-2">全部回复</h4>
      <div class="col-sm-4 discussion" v-for="(item, index) in discussion" :key="index">
        <div class="name-box">
          <div class="img-box1 mt-1 ms-1"><img :src="item.imgbase64"></div>
          <div class="content">
            <p class="book-tap mt-1 ms-1 fs_7">{{ item.username }}</p>
          </div>
        </div>
        <p class="ms-2_5">{{ item.ext }}</p>
        <p class="discussion-content ms-2_5 fs_6">{{ index + 1 }}楼 {{ item.updatetime.substring(0, 4) == new
          Date().getFullYear()
          ? item.updatetime.replace(/^[^-]*-|:[^:]*$/g, '')
          : item.updatetime.replace(/:[^:]*$/g, '') }}
          <span class="right_index"><i class="icon-chat" @click="option.show = true"></i> &nbsp;
            <i class="icon-thumbs-o-up"></i> {{ item.hitsum }}
          </span>
        </p>
        <p class="ms-2 underline"></p>
      </div>
    </div>
    <div class="input-box" v-show="showToggle">
      <button class="icon-button" @click="toggleMode"><i class="icon-caret-down"></i></button>
      <input class="text-input" v-model="content" placeholder="说点什么吧" />
      <a class="send-button" @click="sendContent"><i class="icon-location-arrow"></i></a>
    </div>
  </div>
</template>

<script>
import Header from './components/Header.vue'
export default {
  components: { Header },
  data() {
    return {
      data: this.$store.state.discussion,
      discussion: [],
      content: '',
      showToggle: false
    }
  },
  methods: {
    toggleMode() {
      this.showToggle = false
    },
    sendContent() {
      console.log(this.content)
    },
    chat() {
      this.showToggle = true
    }
  },
  mounted() {
    this.post('qryDiscussion', {
      id: this.data.id,
      pagesize: 10,
      pagenum: 1
    }, { emulateJSON: true }).then((res) => {
      this.discussion = res.data.data.list
    })
  }
}
</script>

<style lang='scss' scoped>
.right_index {
  position: absolute;
  right: 1rem;
}

.fs_6 {
  font-size: 0.6rem;
}

.fs_7 {
  font-size: 0.7rem;
}

.name-box {
  display: flex;
}

.img-box1 {
  height: 90%;
  width: 1.5rem;
}

.img-box {
  height: 90%;
  width: 3rem;
}

.discussion {
  min-height: 5rem;
}

.content {
  margin-top: 0.25rem;
  margin-left: 0.25rem !important;
}

.ms-2_5 {
  margin-left: 2.25rem;
}

.discussion-content {
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.underline {
  border-bottom: 1px solid rgb(224, 222, 222);
  width: 95%;
}

.book-tap {
  margin: 0 0 0 0;
}

.discussion-content {
  display: table;
}

.img-box {
  max-height: 3rem;
  width: 3rem;
}

.menu-top {
  margin: 0 .3rem 0 .3rem;
  border-radius: 0.5rem 0.5rem 0 0;
  background-color: white;
  display: flex;
}

.star {
  font-size: 0.8rem;
  color: #f7e34a;
}
</style>
